<template>
  <div>
    <el-segmented v-model="gameName" :options="games" size="large" @change="handleSelect">
      <template #default="{ item }">
        <div class="flex flex-col items-center gap-2 p-2">
          <el-icon size="20" v-if="item.iconType === 'element'">
            <component :is="item.icon" />
          </el-icon>
          <i v-if="item.iconType === 'iconfont'" :class="`iconfont ${item.icon}`" style="font-size: 20px"></i>
          <div>{{ item.label }}</div>
        </div>
      </template>
    </el-segmented>
    <div style="margin-top: 20px" v-for="component in componentList">
      <component :is="component.component" ref="refGameComponent" :args="component.args" @goPage="goPage" @topGoPage="topGoPage" />
    </div>
  </div>
</template>

<script>
import { Apple, Bowl, QuestionFilled } from '@element-plus/icons-vue'
import {defineAsyncComponent} from "vue"
export default {
  name: 'GameRoot',
  components: { Apple },
  data() {
    return {
      gameName: 'tiger',
      games: [
        {
          label: chrome.i18n.getMessage('menuNameGameTiger'),
          value: 'tiger',
          iconType: 'iconfont',
          icon: 'icon-laohuji',
          component: defineAsyncComponent(()=> import('@/components/game/Tiger.vue'))
        },
        {
          label: chrome.i18n.getMessage('menuNameGameLunch'),
          value: 'lunch',
          iconType: 'element',
          icon: Bowl,
          component: defineAsyncComponent(()=> import('@/components/game/Lunch.vue'))
        },
        {
          label: chrome.i18n.getMessage('menuNameGameCouplet'),
          value: 'couplet',
          iconType: 'iconfont',
          icon: 'icon-duilian1',
          component: defineAsyncComponent(()=> import('@/components/game/Couplet.vue'))
        },
        /*{
          label: chrome.i18n.getMessage('menuNameGameQuestion'),
          value: 'question',
          iconType: 'element',
          icon: QuestionFilled,
          component: defineAsyncComponent(()=> import('@/components/game/Question.vue'))
        },*/
        {
          label: chrome.i18n.getMessage('menuNameWeird'),
          value: 'weird',
          iconType: 'iconfont',
          icon: 'icon-zhongyaoyinpiana5',
          component: defineAsyncComponent(()=> import('@/components/game/Weird.vue'))
        },
        {
          value: 'weird-form',
          component: defineAsyncComponent(()=> import('@/components/game/WeirdForm.vue'))
        },
        {
          value: 'weird-detail',
          component: defineAsyncComponent(()=> import('@/components/game/WeirdDetail.vue'))
        }
      ],
      componentList: []
    }
  },
  methods: {
    handleSelect(key, args) {
      const game = this.games.find(item => item.value === key)
      if (!game) {
        return
      }
      this.componentList = []
      setTimeout(()=> {
        this.componentList.push({
          component: game.component,
          args: args
        })
      }, 100)
    },
    goPage(page, args) {
      console.log('do go page:', page, args)
      this.handleSelect(page, args)
    },
    topGoPage(page, args) {
      this.$emit('goPage', page, args)
    }
  },
  mounted() {
    this.handleSelect('tiger')
  }
}
</script>

<style scoped>
/deep/ .el-segmented--large .el-segmented__item {
  padding: 11px;
}
</style>